<template>
	<view class="con-box">
		<view class="headBox">
			<view class="logo-show">
				<view class="logo">
					<image src="@/static/login/logo.png" mode="widthFix"></image>
				</view>
			</view>
			<image class="company-name" src="@/static/login/name2.png" mode="widthFix"></image>
			<view class="title">注册账号</view>
		</view>
		<view class="formBox">
			<view class="submit-form">
				<view class="phone-number">
					<image src="@/static/login/icon1.png" class="icon" mode="widthFix"></image>
					<input v-model="form.phone" placeholder="请输入您的手机号" @input="onInput" :maxlength="11"
						placeholder-class="placeholderStyle"></input>
				</view>
				<view class="img-number">
					<image src="@/static/login/icon4.png" class="icon" mode="widthFix"></image>
					<input v-model="form.regCode" placeholder="请输入计算结果" placeholder-class="placeholderStyle"></input>
					<view class="image-box">
						<image ref="loginCode" @tap="getLoginCode('register')" style="width: 100%;"
							:src="form.loginCodeSrc" mode="heightFix"></image>
					</view>
				</view>
				<view class="code-number">
					<image src="@/static/login/icon2.png" class="icon" mode="widthFix"></image>
					<input v-model="form.Verification" placeholder="请输入验证码" placeholder-class="placeholderStyle"
						maxlength="6"></input>
					<u-code change-text="x秒后" ref="uCode" @change="codeChange">
					</u-code>
					<text class="code-btn" :style="[isStyle('code-btn',isActive)]" @tap="getCode">{{tips}}</text>
				</view>
				<view class="phone-number passIcon">
					<image src="@/static/login/icon5.png" class="icon" mode="widthFix"></image>
					<input v-model="form.reNewPassWord" placeholder="请输入8-15位字母+数字组合的密码" :password="passFlag?false:true"
						@blur="passwordChange(1)" placeholder-class="placeholderStyle"></input>
					<image @tap="passFlag = !passFlag" class="iconfont1" mode="aspectFit"
						:src="passFlag?require('@/static/login/kejian.png'):require('@/static/login/nkejian.png')">
					</image>
				</view>
				<view class="phone-number passIcon">
					<image src="@/static/login/icon5.png" class="icon" mode="widthFix"></image>
					<input v-model="form.newPassWord" placeholder="请重复输入密码" :password="passFlag1?false:true"
						@blur="passwordChange(2)" placeholder-class="placeholderStyle"></input>
					<image @tap="passFlag1 = !passFlag1" class="iconfont1" mode="aspectFit"
						:src="passFlag1?require('@/static/login/kejian.png'):require('@/static/login/nkejian.png')">
					</image>
				</view>
				<!-- <view class="yaoqingma" style="margin-bottom: 30upx;" v-if="form.referralCode != ''"> -->
				<view class="phone-number" style="margin-bottom: 30upx;">
					<image src="@/static/login/icon6.png" class="icon" mode="widthFix"></image>
					<input v-model="form.referralCode" color="#ffffff" :placeholder="`邀请码(选填)`"
						placeholder-class="placeholderStyle" :disabled="disable" @blur="getChannelCode">
					</input>
				</view>
				<view class="phone-number" style="margin-bottom: 30upx;">
					<image src="@/static/login/icon6.png" class="icon" mode="widthFix"></image>
					<input v-model="form.agentChannelCode" color="#ffffff" :placeholder="`服务代码(选填)`"
						placeholder-class="placeholderStyle" :disabled="disable1">
					</input>
				</view>
				<!-- <view class="yaoqingma">
					<image src="@/static/login/icon3.png" mode="widthFix"></image>
					<input v-model="form.agentChannelCode" color="#ffffff" placeholder="邀请码(选填)" placeholder-class="placeholderStyle">
					</input>
				</view> -->
				<view class="zcxy">
					<view class="check-box">
						<u-checkbox-group size="14px" @change="checkChange">
							<u-checkbox :checked="checked" inactiveColor="#000000" labelColor="#000000" labelSize="12px"
								size="14px" activeColor="#C09B3A" shape="circle" label="已阅读并同意"></u-checkbox>
						</u-checkbox-group>
						<!-- <image src="@/static/login/xy.png" mode="widthFix"></image> -->
					</view>
					<view class="check-text">
						<text class="text_2" @tap.stop="agreement('zhucexieyikey')">《用户协议》</text>
						<text class="text_1">和</text>
						<text class="text_2" @tap.stop="agreement('yinsixieyikey')">《隐私政策》</text>
					</view>
				</view>
				<view class="register-btn" @tap="registerSubmit">
					注册
				</view>
				<view class="login-btn" @tap="goLogin">
					已有账号，<text>去登录</text>
				</view>
			</view>
		</view>

		<!-- 图形验证码 -->
		<u-popup :show="show" bg-color="#141414" :round="20" :customStyle="{width:'670upx'}" mode="center"
			:closeable="true" @close="close">
			<view class="code-tips">
				<view class="code-title">
					图形验证码
				</view>
				<view class="input-code">
					<view class="input-box">
						<input v-model="form.regCode" placeholder="请输入计算结果" placeholder-class="placeholderStyle"
							:focus="regCodeInput">
						</input>
					</view>
					<view class="image-box">
						<image ref="loginCode" @tap="getLoginCode('register')" style="width: 100%;"
							:src="form.loginCodeSrc" mode="heightFix"></image>
					</view>
				</view>
				<view class="confirm-btn" @tap="getPhoneCode">
					确定
				</view>
			</view>
		</u-popup>

		<u-popup :show="registerShow" bg-color="#141414" :round="20" :customStyle="{width:'620upx'}" mode="center">
			<view class="register-success">
				<view class="line_1">
					<image src="@/static/detail/shopsuccess.png"></image>
				</view>
				<view class="line_2">
					<text class="line_2_1">恭喜您成为</text>
					<text class="line_2_2">【中天富数字资产运营平台】</text>
				</view>
				<view class="line_3">
					<view class="line_3_1">第</view>
					<view class="line_3_2">{{ranking}}</view>
					<view class="line_3_1">位用户</view>
				</view>
				<view class="bottm">{{timerNum}}&nbsp;&nbsp;秒后跳转首页</view>
			</view>
		</u-popup>

		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		sendPhoneValidCode,
		getIsInviteCode,
		phoneRegist,
	} from "@/api/login.js";
	import {
		getByAgentChannelCode
	} from "@/api/user.js";
	import {
		phoneType
	} from "@/common/util.js";
	export default {
		data() {
			return {
				appHref:'https://zhongtf001.oss-cn-guangzhou.aliyuncs.com/file/zhongtf.apk',
				from:'',
				timerNum: 2,
				timerInterval: null,
				show: false,
				registerShow: false,
				isInviteCode: false,
				form: {
					loginCode: "",
					phone: "",
					Verification: "",
					referralCode: "",
					regCode: "",
					loginCodeUid: "",
					loginCodeSrc: "",
					agentChannelCode: "",
					reNewPassWord: "",
					newPassWord: ""
				},
				loginCodeUid: "",
				loginCodeSrc: "",
				tips: "",
				ranking: "",
				// popup: false,
				poster: {},
				isActive: true,
				regCodeInput: false,
				checked: false,
				passFlag: false,
				passFlag1: false,
				disable: false,
				disable1: false,
			};
		},
		watch: {
			show(newVal, oldVal) {
				if (newVal) {
					this.regCodeInput = true
				}
			}
		},
		onLoad(option) {
			// if (uni.getStorageSync('isLogin')) {
			// 	uni.switchTab({
			// 		url: '/pages/index/home'
			// 	});
			// }

			console.log(option, '000')
			if(option.from) {
				this.from = option.from
			}
			if (option.code) {
				let obj = option.code
				if (typeof(obj) == "undefined" || obj == "" || obj == null || obj == "null" || obj.length == 0) {
					this.form.referralCode = "";
					console.log('1111');
				} else {
					this.form.referralCode = option.code;
					this.disable = true;
					console.log(this.form.referralCode,'333')
				}
			}
			if (option.agentChannelCode) {
				let obj = option.agentChannelCode
				if (typeof(obj) == "undefined" || obj == "" || obj == null || obj == "null" || obj.length == 0) {
					this.form.agentChannelCode = "";
					console.log('2222');
				} else {
					this.form.agentChannelCode = option.agentChannelCode;
					this.disable1 = true;
				}
			}
			this.getLoginCode("init");
			// this.getLoginCode();
			uni.clearStorage();
		},
		methods: {
			checkChange() {
				this.checked = !this.checked;
			},
			// 用户协议和隐私政策
			agreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				});
			},
			getChannelCode() {
				if (this.form.referralCode) {
					getByAgentChannelCode({
						referralCode: this.form.referralCode
					}).then(res => {
						if (res.data.success) {
							this.form.agentChannelCode = res.data.obj;
							this.disable1 = true
						}
					})
				}
			},
			isStyle(data, izSellOut) {
				if (data == 'formBox') {
					if (izSellOut) {
						return {
							'transform': 'translate(0,-600upx)'
						}
					}
				} else if (data == 'code-btn') {
					if (izSellOut) {
						return {
							'color': '#C09B3A'
						}
					} else {
						return {
							'color': '#C09B3A'
						}
					}
				}
			},
			onInput(e) {
				let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (reg.test(this.form.phone)) {
					this.isActive = false;
				} else {
					this.isActive = true;
				}
			},
			// 重新获取图片验证码
			getLoginCode(type) {
				this.form.loginCodeUid = new Date().getTime();
				this.form.loginCodeSrc = `${this.baseApi}/code/loginCode?uid=${this.form.loginCodeUid}`;
			},
			// 获取手机验证码
			getCode() {
				if (this.form.regCode) {
					try {
						if (!this.form.phone) throw "请输入手机号";
						let reg =
							/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
						if (!reg.test(this.form.phone)) throw "手机号码格式不正确";
					} catch (e) {
						this.$u.toast(e);
						return;
					}
					this.getPhoneCode();
					// this.show = true;
				} else {
					this.$u.toast("请输入图形验证码");
				}
			},
			// 发送短信
			getPhoneCode() {
				try {
					if (!this.form.regCode) throw "请输入验证码";
				} catch (e) {
					this.$u.toast(e);
					return;
				}
				let obj = {
					mobile: this.form.phone,
					uid: this.form.loginCodeUid,
					regCode: this.form.regCode,
				};
				this.$refs.min_loading.open("正在发送短信验证码");
				sendPhoneValidCode(obj)
					.then((res) => {
						if (res.data.success) {
							this.$u.toast("验证码已发送");
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.data.msg);
						}
						this.close();
					}).catch((err) => {
						this.$u.toast("网络错误");
						this.close();
						this.$refs.min_loading.close();
					}).finally(() => {
						this.$refs.min_loading.close();
					});
			},
			// 获取验证码按钮倒计时
			codeChange(text) {
				this.tips = text;
			},
			// 收起图片验证码弹窗
			close() {
				this.form.loginCode = "";
				this.show = false;
			},
			// 检验密码
			passwordChange(num) {
				let reg = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{8,15}$/;
				if (!reg.test(this.form.reNewPassWord) && num == 1) {
					this.$u.toast("密码必须是由8-15位字母+数字组合")
				}
				if (!reg.test(this.form.newPassWord) && num == 2) {
					this.$u.toast("密码必须是由8-15位字母+数字组合")
				}

			},
			// 注册按钮
			registerSubmit() {
				if (!this.form.phone) {
					// return;
					this.$u.toast('请输入手机号')
				}
				let obj = {
					uid: this.form.loginCodeUid,
					mobile: this.form.phone,
					referralCode: this.form.referralCode,
					regCode: this.form.regCode,
					verifyCode: this.form.Verification,
					passWord: this.form.reNewPassWord,
					repeatpassWord: this.form.newPassWord,
					agentChannelCode: this.form.agentChannelCode
				};
				try {
					if (this.isInviteCode && !obj.referralCode) throw "请输入邀请码";
					if (!obj.mobile) throw "请输入手机号";
					let reg =
						/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (!reg.test(obj.mobile)) throw "手机号码格式不正确";
					if (!obj.verifyCode) throw "请输入短信验证码";
					let reg1 = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{8,15}$/;
					if (!reg1.test(obj.passWord)) throw "密码必须是由8-15位字母+数字组合";
					if (!reg1.test(obj.repeatpassWord)) throw "密码必须是由8-15位字母+数字组合";
					if (!obj.passWord || !obj.repeatpassWord) throw "请输入密码";
					if (obj.passWord != obj.repeatpassWord) throw "您输入的两次密码不一致";
				} catch (e) {
					this.$u.toast(e);
					return;
				}
				if (!this.checked) {
					this.$u.toast("请勾选已阅读协议！");
					return;
				}
				this.$refs.min_loading.open("注册中，请稍后！");
				obj.passWord = this.hrymd5.md5(obj.passWord);
				obj.repeatpassWord = this.hrymd5.md5(obj.repeatpassWord);
				phoneRegist(obj)
					.then((res) => {
						if (res.data.success) {
							let dateTime = new Date().getTime()
							try {
								uni.setStorageSync('newToken', {
									token: res.data.obj.token,
									overtime: dateTime + (24 * 60 * 60 * 1000)
								});
							} catch (e) {
								// error
							}
							this.$store.dispatch("getuser", 2);
							this.$u.toast('注册成功！')
							this.ranking = res.data.obj.ranking;
							// this.registerShow = true;
				
							console.log("# from # " + this.from)
							if(this.from == 'poster' ){
								this.loadApp()
							} else {
								this.endGoHome();
							}
						} else {
							this.$u.toast(res.data.msg);
						}
						this.$refs.min_loading.close();
					}).catch((err) => {
						this.$refs.min_loading.close();
					}).finally((data) => {
						this.$refs.min_loading.close();
					});
			},
			loadApp(){
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.appHref) //这里默认使用外部浏览器打开而不是内部web-view组件打开
				// #endif
				// #ifdef H5
				window.open(this.appHref)
				// #endif
			},
			endGoHome() {
				this.timerInterval = setInterval(() => {
					this.timerNum--;
					if (this.timerNum <= 0) {
						clearInterval(this.timerInterval);
						this.$store.dispatch("userLogin");
					}
				}, 1000);
			},
			// 跳转登录页面
			goLogin() {
				uni.redirectTo({
					url: "/pages/login/login",
				});
			},
			// 协议页面
			agreement(type) {
				uni.navigateTo({
					url: "/pages/login/agreement?type=" + type,
				});
			},
		},
		// mounted() {
		// 	if (phoneType() == "android") {
		// 		const originHeight =
		// 			document.documentElement.clientHeight || document.body.clientHeight;
		// 		window.addEventListener("resize", () => {
		// 			const resizeHeight =
		// 				document.documentElement.clientHeight || document.body.clientHeight;
		// 			const activeElement = document.activeElement;
		// 			if (resizeHeight < originHeight) {
		// 				// 键盘弹起后逻辑
		// 				this.popup = true;
		// 			} else {
		// 				// 键盘收起后逻辑
		// 				this.popup = false;
		// 			}
		// 		});
		// 	}
		// },
	};
</script>

<style lang="less" scoped>
	.con-box {
		width: 100%;
		padding-bottom: 60upx;

		.headBox {
			width: 100%;
			height: 756upx;
			background-image: url("../../static/login/bg.png");
			background-size: 100% 662upx;
			background-repeat: no-repeat;
			text-align: center;
			color: #fff;

			.company-name {
				width: 216upx;
				margin-top: 16upx;
			}

			.title {
				font-size: 30upx;
				margin-top: 40upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.logo-show {
				width: 100%;

				.logo {
					width: 100%;
					display: flex;
					justify-content: center;
					padding-top: 80upx;

					image {
						width: 224upx;
					}
				}

				.name {
					font-size: 24upx;
					padding-top: 16upx;
					font-weight: normal;
					line-height: 24upx;
				}

				.str {
					font-size: 19upx;
					line-height: 24upx;
					width: 240upx;
					margin: 0 auto;
					margin-top: 8upx;
					text-align: center;
				}
			}
		}

		.formBox {
			width: 100%;
			z-index: 100;
			display: flex;
			padding: 0 30upx;
			align-items: center;
			flex-direction: column;
			margin-top: -220upx;
			// transform: translateY(-220upx);
		}

		.submit-form {
			width: 100%;
			padding: 30upx 20upx;
			// padding-top: 60upx;
			font-size: 28upx;
			color: #333;
			background: #FDFDFF;
			box-shadow: 0px 18upx 62upx 4upx rgba(225, 208, 189, 0.5400);
			border-radius: 12upx;

			.zcxy {
				display: flex;
				width: 100%;
				height: 32upx;
				align-items: center;
				justify-items: center;
				margin-top: 70upx;

				// .check-box{
				// 	image{
				// 		width: 20upx;
				// 	}
				// }
				.check-text {
					font-size: 24upx;
					color: #000000;

					.text_2 {
						font-family: PingFang SC;
						font-style: normal;
						font-weight: normal;
						text-align: center;
						color: #C09B3A;
					}


				}
			}

			.yaoqingma {
				width: 100%;
				height: 100upx;
				padding: 0 46upx;
				padding-left: 96upx;
				margin: 0 0 30upx;
				border-radius: 5upx;
				background-color: #E5E5E5;
				display: flex;
				align-items: center;
				position: relative;

				>image {
					width: 56upx;
					position: absolute;
					top: 22upx;
					left: 30upx;
				}

				input {
					width: 100%;
				}
			}

			.yaoqingma-tips {
				margin: 10upx 0 20upx;
				width: 100%;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 28upx;
				line-height: 40upx;
				// color: rgba(255, 255, 255, 0.4);
				background: rgba(30, 30, 39, .65);
			}

			.phone-number {
				width: 100%;
				height: 90upx;
				padding: 0 20upx;
				padding-left: 80upx;
				margin: 0 0 30upx;
				border-radius: 5upx;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 6upx;

				.icon {
					width: 30upx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 20upx;
				}

				input {
					width: 100%;
				}
			}

			.passIcon {
				input {
					width: 80%;
				}

				.iconfont1 {
					position: absolute;
					// top: 34upx;
					right: 20upx !important;
					width: 50upx;
					height: 30upx;
				}
			}

			.img-number {
				width: 100%;
				height: 90upx;
				padding: 10upx 10upx 10upx 20upx;
				padding-left: 80upx;
				margin: 0 0 30upx;
				border-radius: 5upx;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 6upx;

				>image {
					width: 30upx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 20upx;
				}

				input {
					height: 100%;
					width: calc(100% - 160upx);
				}

				.image-box {
					height: 100%;
					// border-radius: 43upx;

					image {
						width: 100%;
						height: 100%;
						// border-radius: 43upx;
					}
				}
			}

			.code-number {
				width: 100%;
				height: 90upx;
				padding: 0 20upx;
				padding-left: 80upx;
				margin: 0 0 30upx;
				border-radius: 5upx;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 6upx;

				>image {
					width: 30upx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 20upx;
				}

				input {
					height: 100%;
					width: calc(100% - 160upx);
				}

				.code-btn {
					width: 160upx;
					font-family: PingFang SC;
					line-height: 44upx;
					text-align: right;

					font-size: 26upx;
					color: #2C1769;
					// background: linear-gradient(95deg, #FA542E 0%, #D30211 100%);
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
				}
			}

			.register-btn {
				margin: 20upx 0 20upx 0;
				width: 100%;
				height: 96upx;
				line-height: 96upx;
				background-color: #CEA539;
				font-family: PingFang SC;
				font-size: 32upx;
				text-align: center;
				color: #fff;
				font-weight: bold;
				letter-spacing: 10upx;
				border-radius: 6upx;
			}

			.login-btn {
				text-align: center;
				font-size: 24upx;
				line-height: 24upx;
				font-weight: 500;
				margin-top: 30upx;
				color: #000000;

				text {
					color: #C09B3A;
				}
			}
		}

		.code-tips {
			width: 100%;
			height: 448upx;
			padding: 0 32upx;
			border-radius: 20upx;

			.code-title {
				margin-top: 64upx;
				margin-bottom: 48upx;
				font-family: PingFang SC;
				font-style: normal;
				font-size: 30upx;
				line-height: 50upx;
				text-align: center;
				color: #ffffff;
				mix-blend-mode: normal;
			}

			.input-code {
				display: flex;
				height: 85upx;
				justify-content: space-between;
				align-items: center;
				background-color: rgba(255, 255, 255, 0.15);
				border-radius: 43upx;

				.input-box {
					color: #fff;
					height: 100%;
					// width: 326upx;
					flex: 1%;
					padding: 0 40upx;

					input {
						font-size: 24upx;
						height: 100%;
					}
				}

				.image-box {
					height: 100%;
					border-radius: 43upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 43upx;
					}
				}
			}

			.confirm-btn {
				margin-top: 60upx;
				width: 100%;
				height: 80upx;
				line-height: 80upx;
				background-color: #2b267f;
				border-radius: 8upx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 600;
				font-size: 30upx;
				text-align: center;
				color: #ffffff;
			}
		}

		.register-success {
			width: 100%;
			height: 560upx;
			padding: 0 32upx;
			border-radius: 20upx;

			.bottm {
				text-align: center;
				color: #fff;
				font-size: 24upx;
				margin-top: 40upx;
			}

			.line_1 {
				padding-top: 64upx;
				width: 100%;
				height: 196upx;
				text-align: center;

				image {
					width: 132upx;
					height: 132upx;
				}
			}

			.line_2 {
				margin: 36upx auto;
				width: 100%;
				text-align: center;

				.line_2_1 {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 26upx;
					line-height: 50upx;
					text-align: center;
					color: #ffffff;
					mix-blend-mode: normal;
					opacity: 0.6;
				}

				.line_2_2 {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 600;
					font-size: 30upx;
					line-height: 50upx;
					color: #ffffff;
					mix-blend-mode: normal;
					opacity: 0.6;
				}
			}

			.line_3 {
				background: #3B3B3B;
				width: 100%;
				height: 112upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20upx;

				.line_3_1 {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 28upx;
					color: #ffffff;
					mix-blend-mode: normal;
					opacity: 0.6;
				}

				.line_3_2 {
					margin: 0 15upx;
					font-family: "szzt";
					font-style: normal;
					font-weight: normal;
					font-size: 70upx;
					// line-height: 112upx;
					text-align: center;
					color: #ffffff;
					mix-blend-mode: normal;
					text-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
				}
			}
		}
	}
</style>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.placeholderStyle {
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #565656;
	}
</style>
